import React, { Component } from 'react';

import SelectGrand from "./SelectGrand";

class SelectDaughter extends Component {
  state = {
    selectOptionDaughter: '',
  }

  componentDidMount() {
    // 将props 传给 state 再传给 子级
    
  }
  // 三级传值 需要 更新组件监听props 在付给 state 继续传智
  componentWillReceiveProps(nextProps) {
    // console.log(this.props)
    // console.log(nextProps)
    this.setState({ 
      unclueToNiece: nextProps.sonToDaughter
    })
  }
  shouldComponentUpdate(nextProps, nextState) {
    // console.log(nextProps)
    // console.log(nextState)
    // react尽可能的避免了昂贵的dom操作，并且允许开发者干涉该行为。
    return true
    // return this.props.unclueToNiece !== nextProps.unclueToNiece;
    // let res = nextState.unclueToNiece == this.props.unclueToNiece ? false : true
  }

  selectDaughter = e => {
    // console.log(e.target.value)
    this.setState({
      selectOptionDaughter: e.target.value
    })
    // 女传父 props 回调函数
    this.props.toParent(this.refs.select.value)
    // 女传父 再传 子
    this.props.onSelectParent(e.target.value)
  }

  render() {

    const ownOptions = [
      {i: 1, val: 'Daughter1'},
      {i: 2, val: 'Daughter2'},
      {i: 3, val: 'Daughter3'},
    ]

    return (
      <div>
        <div>
          <select onChange={ (e) => this.selectDaughter(e)} ref="select" value={this.state.selectOptionDaughter}>
            {
              ownOptions.map( (v,i) => 
                <option value={v.val} key={v.i}>{v.val}</option>
              )
            }
          </select>    
          <div>
            <p>Daughter - res: {this.state.selectOptionDaughter}</p>
            <p>son to daughter - res: {this.props.sonToDaughter}</p>
          </div>      
        </div>

        <SelectGrand toGrand={this.props.toGrand} receiveUncle={this.state.unclueToNiece}/>
      </div>
    )
  }
}

export default SelectDaughter;